<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
    
    <!-- 自定义样式 -->
    <style type="text/css">
        /* 禁用按钮样式 */
        .toggle-button {
            margin-left: 5px;
            padding: 2px 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
            background-color: #f5f5f5;
            cursor: pointer;
            display: inline-block;
        }
        .toggle-button:hover {
            background-color: #e6e6e6;
        }
    </style>
</head>
<body>
<div style="margin-left: 20px;">
    <h3>EasyUI 输入框取值示例</h3>
    
    <!-- 全局禁用/启用按钮 -->
    <div style="margin-bottom: 15px;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disableAllInputs()">禁用所有输入框</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enableAllInputs()">启用所有输入框</a>
    </div>

    <form id="demoForm">
        <!-- 标准文本框 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>标准文本框：</label>
            <input class="easyui-textbox" id="standardTextbox" name="standardTextbox" style="width:300px" data-options="value:'测试文本'">
            <a href="javascript:void(0)" onclick="getStandardTextbox()">获取值</a>
            <a href="javascript:void(0)" onclick="setStandardTextbox()">设置值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#standardTextbox', 'textbox')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 密码框 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>密码框：</label>
            <input class="easyui-passwordbox" id="passwordbox" name="passwordbox" style="width:300px" data-options="value:'123456'">
            <a href="javascript:void(0)" onclick="getPasswordbox()">获取值</a>
            <a href="javascript:void(0)" onclick="setPasswordbox()">设置值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#passwordbox', 'passwordbox')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 多行文本框 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>多行文本框：</label>
            <input class="easyui-textbox" id="multilineTextbox" name="multilineTextbox" style="width:300px;height:100px" data-options="multiline:true,value:'多行文本\n测试'">
            <a href="javascript:void(0)" onclick="getMultilineTextbox()">获取值</a>
            <a href="javascript:void(0)" onclick="setMultilineTextbox()">设置值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#multilineTextbox', 'textbox')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 数字输入框 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>数字输入框：</label>
            <input class="easyui-numberbox" id="numberbox" name="numberbox" style="width:300px" data-options="value:100,min:0,max:1000">
            <a href="javascript:void(0)" onclick="getNumberbox()">获取值</a>
            <a href="javascript:void(0)" onclick="setNumberbox()">设置值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#numberbox', 'numberbox')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 日期输入框 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>日期输入框：</label>
            <input class="easyui-datebox" id="datebox" name="datebox" style="width:300px" data-options="value:'2024-03-20'">
            <a href="javascript:void(0)" onclick="getDatebox()">获取值</a>
            <a href="javascript:void(0)" onclick="setDatebox()">设置值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#datebox', 'datebox')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 组合框 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>组合框：</label>
            <input class="easyui-combobox" id="combobox" name="combobox" style="width:300px" data-options="
                valueField: 'value',
                textField: 'text',
                value: '1',
                data: [{
                    text: '选项1',
                    value: '1'
                },{
                    text: '选项2',
                    value: '2'
                },{
                    text: '选项3',
                    value: '3'
                }]">
            <a href="javascript:void(0)" onclick="getCombobox()">获取值</a>
            <a href="javascript:void(0)" onclick="setCombobox()">设置值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#combobox', 'combobox')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 多选下拉框 (✓表单元素：可通过serializeArray获取，但注意多选时需要特殊处理) -->
        <div style="margin-bottom: 10px;">
            <label>多选下拉框：</label>
            <input class="easyui-combobox" id="multipleCombobox" name="multipleCombobox" style="width:300px" data-options="
                valueField: 'value',
                textField: 'text',
                multiple: true,
                value: ['1','2'],
                data: [{
                    text: '选项1',
                    value: '1'
                },{
                    text: '选项2',
                    value: '2'
                },{
                    text: '选项3',
                    value: '3'
                },{
                    text: '选项4',
                    value: '4'
                },{
                    text: '选项5',
                    value: '5'
                }]">
            <a href="javascript:void(0)" onclick="getMultipleCombobox()">获取值</a>
            <a href="javascript:void(0)" onclick="setMultipleCombobox()">设置值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#multipleCombobox', 'combobox')">禁用/启用</a>
            <span style="color:green">✓ 表单元素（多选值需特殊处理）</span>
        </div>

        <!-- 新增：复选框 (✓表单元素：原生checkbox可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>复选框：</label>
            <input class="easyui-checkbox" id="checkbox1" name="checkbox" value="选项A" data-options="label:'选项A',checked:true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input class="easyui-checkbox" id="checkbox2" name="checkbox" value="选项B" data-options="label:'选项B'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0)" onclick="getCheckbox()">获取值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisableCheckbox()">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 新增：单选按钮 (✓表单元素：原生radio可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>单选按钮：</label>
            <input class="easyui-radiobutton" id="radio1" name="radioOption" value="选项1" data-options="label:'选项1',checked:true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input class="easyui-radiobutton" id="radio2" name="radioOption" value="选项2" data-options="label:'选项2'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input class="easyui-radiobutton" id="radio3" name="radioOption" value="选项3" data-options="label:'选项3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0)" onclick="getRadio()">获取值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisableRadio()">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 新增：开关按钮 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>开关按钮：</label>
            <input class="easyui-switchbutton" id="switchbutton" name="switchbutton" data-options="onText:'开启',offText:'关闭',checked:true">
            <a href="javascript:void(0)" onclick="getSwitch()">获取值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#switchbutton', 'switchbutton')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 新增：滑块 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>滑块：</label>
            <input class="easyui-slider" id="slider" name="slider" style="width:300px" data-options="value:50,min:0,max:100,showTip:true">
            <a href="javascript:void(0)" onclick="getSlider()">获取值</a>
            <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisable('#slider', 'slider')">禁用/启用</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 新增：隐藏域 (✓表单元素：可通过serializeArray获取) -->
        <div style="margin-bottom: 10px;">
            <label>隐藏域：</label>
            <input type="hidden" id="hiddenField" name="hiddenField" value="隐藏值">
            <a href="javascript:void(0)" onclick="getHiddenField()">获取值</a>
            <span style="color:green">✓ 表单元素</span>
        </div>

        <!-- 验证框组 (validatebox) -->
        <div style="margin: 20px 0; padding: 10px; background-color: #f0f8ff; border: 1px solid #b8d6fb;">
            <h3>验证框示例 (Validatebox)</h3>

            <!-- 必填验证 -->
            <div style="margin-bottom: 10px;">
                <label>必填字段：</label>
                <input class="easyui-validatebox" id="requiredField" name="requiredField" style="width:300px"
                    data-options="required:true,missingMessage:'此字段必填'" value="">
                <span style="color:#999">* 必填字段</span>
                <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisableValidatebox('#requiredField')">禁用/启用</a>
            </div>

            <!-- 邮箱验证 -->
            <div style="margin-bottom: 10px;">
                <label>邮箱验证：</label>
                <input class="easyui-validatebox" id="emailField" name="emailField" style="width:300px"
                    data-options="required:true,validType:'email',invalidMessage:'请输入有效的邮箱地址'" value="">
                <span style="color:#999">* 如：example@domain.com</span>
                <a href="javascript:void(0)" class="toggle-button" onclick="toggleDisableValidatebox('#emailField')">禁用/启用</a>
            </div>

            <!-- 验证框组禁用按钮 -->
            <div style="margin: 15px 0 5px;">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disableAllValidateboxes()">禁用所有验证框</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enableAllValidateboxes()">启用所有验证框</a>
            </div>

            <!-- URL验证 -->
            <div style="margin-bottom: 10px;">
                <label>URL验证：</label>
                <input class="easyui-validatebox" id="urlField" name="urlField" style="width:300px"
                    data-options="required:true,validType:'url',invalidMessage:'请输入有效的URL'" value="">
                <span style="color:#999">* 如：http://www.example.com</span>
            </div>

            <!-- 长度验证 -->
            <div style="margin-bottom: 10px;">
                <label>长度验证：</label>
                <input class="easyui-validatebox" id="lengthField" name="lengthField" style="width:300px"
                    data-options="required:true,validType:'length[3,10]',invalidMessage:'长度必须在3-10个字符之间'" value="">
                <span style="color:#999">* 长度限制在3-10个字符</span>
            </div>

            <!-- 自定义正则验证 -->
            <div style="margin-bottom: 10px;">
                <label>手机号验证：</label>
                <input class="easyui-validatebox" id="phoneField" name="phoneField" style="width:300px"
                    data-options="required:true,validType:'mobile',invalidMessage:'请输入有效的手机号码'" value="">
                <span style="color:#999">* 中国大陆手机号格式</span>
            </div>

            <!-- 数字范围验证 -->
            <div style="margin-bottom: 10px;">
                <label>数字范围：</label>
                <input class="easyui-validatebox" id="rangeField" name="rangeField" style="width:300px"
                    data-options="required:true,validType:'numberRange[1,100]',invalidMessage:'请输入1-100之间的数字'" value="">
                <span style="color:#999">* 数字范围1-100</span>
            </div>

            <!-- 验证触发方式 -->
            <div style="margin-bottom: 10px;">
                <label>延迟验证：</label>
                <input class="easyui-validatebox" id="delayField" name="delayField" style="width:300px"
                    data-options="required:true,validType:'email',delay:1000,invalidMessage:'请输入有效的邮箱地址'" value="">
                <span style="color:#999">* 停止输入1秒后验证</span>
            </div>

            <!-- 验证操作 -->
            <div style="margin: 15px 0 5px;">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="validateForm()">验证表单</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="resetValidation()">重置验证</a>
                <span id="validationResult" style="margin-left: 10px; color: #666;"></span>
            </div>
        </div>
    </form>

    <!-- 表单序列化演示区域 -->
    <div style="margin: 20px 0; padding: 10px; background-color: #f5f5f5; border: 1px solid #ddd;">
        <h3>表单序列化演示</h3>
        <button type="button" class="easyui-linkbutton" onclick="serializeForm()">序列化表单</button>
        <div id="formResult" style="margin-top: 10px; white-space: pre-wrap; font-family: monospace;"></div>
    </div>
</div>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    // 获取标准文本框的值
    function getStandardTextbox() {
        var value = $('#standardTextbox').textbox('getValue');
        alert('标准文本框的值：' + value);
    }

    // 设置标准文本框的值
    function setStandardTextbox() {
        $('#standardTextbox').textbox('setValue', '新设置的文本');
    }

    // 获取密码框的值
    function getPasswordbox() {
        var value = $('#passwordbox').passwordbox('getValue');
        alert('密码框的值：' + value);
    }

    // 设置密码框的值
    function setPasswordbox() {
        $('#passwordbox').passwordbox('setValue', '654321');
    }

    // 获取多行文本框的值
    function getMultilineTextbox() {
        var value = $('#multilineTextbox').textbox('getValue');
        alert('多行文本框的值：' + value);
    }

    // 设置多行文本框的值
    function setMultilineTextbox() {
        $('#multilineTextbox').textbox('setValue', '这是第一行\n这是第二行\n这是第三行');
    }

    // 获取数字输入框的值
    function getNumberbox() {
        var value = $('#numberbox').numberbox('getValue');
        alert('数字输入框的值：' + value);
    }

    // 设置数字输入框的值
    function setNumberbox() {
        $('#numberbox').numberbox('setValue', '888');
    }

    // 获取日期输入框的值
    function getDatebox() {
        var value = $('#datebox').datebox('getValue');
        alert('日期输入框的值：' + value);
    }

    // 设置日期输入框的值
    function setDatebox() {
        $('#datebox').datebox('setValue', '2024-12-31');
    }

    // 获取组合框的值
    function getCombobox() {
        var value = $('#combobox').combobox('getValue');
        var text = $('#combobox').combobox('getText');
        alert('组合框的值：' + value + '\n组合框的文本：' + text);
    }

    // 设置组合框的值
    function setCombobox() {
        $('#combobox').combobox('setValue', '2');
    }

    // 获取多选下拉框的值
    function getMultipleCombobox() {
        var values = $('#multipleCombobox').combobox('getValues');
        var texts = $('#multipleCombobox').combobox('getText');
        alert('多选下拉框的值：' + values.join(',') + '\n多选下拉框的文本：' + texts);
    }

    // 设置多选下拉框的值
    function setMultipleCombobox() {
        $('#multipleCombobox').combobox('setValues', ['3','4','5']);
    }

    // 获取复选框的值
    function getCheckbox() {
        var checked1 = $('#checkbox1').checkbox('options').checked;
        var checked2 = $('#checkbox2').checkbox('options').checked;
        alert('复选框1选中状态：' + checked1 + '\n复选框2选中状态：' + checked2);
    }

    // 获取单选按钮的值
    function getRadio() {
        var value = $('input[name="radioOption"]:checked').val();
        alert('单选按钮选中的值：' + value);
    }

    // 获取开关按钮的值
    function getSwitch() {
        var checked = $('#switchbutton').switchbutton('options').checked;
        alert('开关按钮状态：' + (checked ? '开启' : '关闭'));
    }

    // 获取滑块的值
    function getSlider() {
        var value = $('#slider').slider('getValue');
        alert('滑块的值：' + value);
    }

    // 获取隐藏域的值
    function getHiddenField() {
        var value = $('#hiddenField').val();
        alert('隐藏域的值：' + value);
    }
    
    // 禁用/启用组件通用函数
    function toggleDisable(selector, componentType) {
        var $component = $(selector);
        var options = $component[componentType]('options');
        
        if (options.disabled) {
            $component[componentType]('enable');
        } else {
            $component[componentType]('disable');
        }
    }
    
    // 禁用/启用复选框
    function toggleDisableCheckbox() {
        if ($('#checkbox1').checkbox('options').disabled) {
            $('#checkbox1').checkbox('enable');
            $('#checkbox2').checkbox('enable');
        } else {
            $('#checkbox1').checkbox('disable');
            $('#checkbox2').checkbox('disable');
        }
    }
    
    // 禁用/启用单选按钮
    function toggleDisableRadio() {
        if ($('#radio1').radiobutton('options').disabled) {
            $('#radio1').radiobutton('enable');
            $('#radio2').radiobutton('enable');
            $('#radio3').radiobutton('enable');
        } else {
            $('#radio1').radiobutton('disable');
            $('#radio2').radiobutton('disable');
            $('#radio3').radiobutton('disable');
        }
    }
    
    // 禁用/启用验证框
    function toggleDisableValidatebox(selector) {
        var $validatebox = $(selector);
        if ($validatebox.attr('disabled')) {
            $validatebox.removeAttr('disabled');
        } else {
            $validatebox.attr('disabled', 'disabled');
        }
    }
    
    // 禁用所有输入框
    function disableAllInputs() {
        $('#standardTextbox').textbox('disable');
        $('#passwordbox').passwordbox('disable');
        $('#multilineTextbox').textbox('disable');
        $('#numberbox').numberbox('disable');
        $('#datebox').datebox('disable');
        $('#combobox').combobox('disable');
        $('#multipleCombobox').combobox('disable');
        $('#checkbox1').checkbox('disable');
        $('#checkbox2').checkbox('disable');
        $('#radio1').radiobutton('disable');
        $('#radio2').radiobutton('disable');
        $('#radio3').radiobutton('disable');
        $('#switchbutton').switchbutton('disable');
        $('#slider').slider('disable');
        
        // 禁用所有验证框
        disableAllValidateboxes();
    }
    
    // 启用所有输入框
    function enableAllInputs() {
        $('#standardTextbox').textbox('enable');
        $('#passwordbox').passwordbox('enable');
        $('#multilineTextbox').textbox('enable');
        $('#numberbox').numberbox('enable');
        $('#datebox').datebox('enable');
        $('#combobox').combobox('enable');
        $('#multipleCombobox').combobox('enable');
        $('#checkbox1').checkbox('enable');
        $('#checkbox2').checkbox('enable');
        $('#radio1').radiobutton('enable');
        $('#radio2').radiobutton('enable');
        $('#radio3').radiobutton('enable');
        $('#switchbutton').switchbutton('enable');
        $('#slider').slider('enable');
        
        // 启用所有验证框
        enableAllValidateboxes();
    }
    
    // 禁用所有验证框
    function disableAllValidateboxes() {
        $('#requiredField').attr('disabled', 'disabled');
        $('#emailField').attr('disabled', 'disabled');
        $('#urlField').attr('disabled', 'disabled');
        $('#lengthField').attr('disabled', 'disabled');
        $('#phoneField').attr('disabled', 'disabled');
        $('#rangeField').attr('disabled', 'disabled');
        $('#delayField').attr('disabled', 'disabled');
    }
    
    // 启用所有验证框
    function enableAllValidateboxes() {
        $('#requiredField').removeAttr('disabled');
        $('#emailField').removeAttr('disabled');
        $('#urlField').removeAttr('disabled');
        $('#lengthField').removeAttr('disabled');
        $('#phoneField').removeAttr('disabled');
        $('#rangeField').removeAttr('disabled');
        $('#delayField').removeAttr('disabled');
    }

    // 序列化表单
    function serializeForm() {
        // 第一种方式：使用serializeArray获取表单数据（标准方式）
        var formArray = $('#demoForm').serializeArray();
        var formResult = "标准serializeArray结果：\n";
        formResult += JSON.stringify(formArray, null, 2);

        // 第二种方式：使用serialize获取表单数据（标准方式）
        var formArray = $('#demoForm').serialize();
        formResult += "\n\n标准serialize结果：\n";
        formResult += JSON.stringify(formArray, null, 2);

        // 第三种方式：使用formData配合serializeArray获取表单数据（标准方式）
        const formData = {};
        $('#demoForm').serializeArray().forEach(function(item) {
            formData[item.name] = item.value;
        });
        formResult += "\n\n标准formData结果：\n";
        formResult += JSON.stringify(formData, null, 2);

        // 第三种方式：获取EasyUI组件的值（更可靠的方式）
        formResult += "\n\n自定义获取EasyUI组件值：\n";
        var customValues = {};

        // 获取各种表单元素的值
        customValues.standardTextbox = $('#standardTextbox').textbox('getValue');
        customValues.passwordbox = $('#passwordbox').passwordbox('getValue');
        customValues.multilineTextbox = $('#multilineTextbox').textbox('getValue');
        customValues.numberbox = $('#numberbox').numberbox('getValue');
        customValues.datebox = $('#datebox').datebox('getValue');
        customValues.combobox = $('#combobox').combobox('getValue');
        customValues.multipleCombobox = $('#multipleCombobox').combobox('getValues');

        // 获取checkbox值（需要特殊处理多选情况）
        customValues.checkbox = [];
        $('input[name="checkbox"]:checked').each(function() {
            customValues.checkbox.push($(this).val());
        });

        customValues.radioOption = $('input[name="radioOption"]:checked').val();
        customValues.switchbutton = $('#switchbutton').switchbutton('options').checked;
        customValues.slider = $('#slider').slider('getValue');
        customValues.hiddenField = $('#hiddenField').val();

        formResult += JSON.stringify(customValues, null, 2);

        // 显示结果
        $('#formResult').html(formResult);
    }

    // 自定义验证规则：手机号码
    $.extend($.fn.validatebox.defaults.rules, {
        mobile: {
            validator: function(value, param) {
                return /^1[3-9]\d{9}$/.test(value);
            },
            message: '请输入有效的手机号码'
        },
        // 数字范围验证
        numberRange: {
            validator: function(value, param) {
                var num = parseFloat(value);
                return !isNaN(num) && num >= param[0] && num <= param[1];
            },
            message: '请输入{0}到{1}之间的数字'
        }
    });

    // 验证整个表单
    function validateForm() {
        var isValid = true;
        var fields = [
            '#requiredField',
            '#emailField',
            '#urlField',
            '#lengthField',
            '#phoneField',
            '#rangeField',
            '#delayField'
        ];

        for (var i = 0; i < fields.length; i++) {
            if (!$(fields[i]).validatebox('isValid')) {
                isValid = false;
                $(fields[i]).validatebox('validate');
            }
        }

        if (isValid) {
            $('#validationResult').html('表单验证通过！').css('color', 'green');
        } else {
            $('#validationResult').html('表单验证失败，请检查输入！').css('color', 'red');
        }
    }

    // 重置验证
    function resetValidation() {
        var fields = [
            '#requiredField',
            '#emailField',
            '#urlField',
            '#lengthField',
            '#phoneField',
            '#rangeField',
            '#delayField'
        ];

        for (var i = 0; i < fields.length; i++) {
            $(fields[i]).validatebox('resetValidation').val('');
        }

        $('#validationResult').html('');
    }
</script>
</body>
</html>

<%--validatebox组件主要关注验证功能，它不像textbox组件那样有完整的getValue()和setValue()方法。validatebox是对原生input的包装，所以主要使用jQuery的val()方法来操作值--%>
